<template>
	<view class="wrap">
		<g-header :title="pageTitle" :hideRight="pageType == 'normal'">
			<image v-if="pageType == 'selectGoods'" style="width: 42rpx;height: 42rpx;"
				src="../../static/images/icon-scan.png" @click="scanCode"></image>
		</g-header>
		<view class="search">
			<view class="search-L">
				<u-search placeholder="搜索店内商品" v-model="keyword" height="60" :show-action="false"
					search-icon-color="#b3b3b3" placeholder-color="#b3b3b3" @search="onSearchConfirm"></u-search>
			</view>
			<view class="classify" @click="showClassifyFlag = true">
				<text class="app_ellipsis">{{typeName}}</text>
			</view>
		</view>
		<view class="main">
			<scroll-view class="lMenu" scroll-y="true">
				<view class="lMenu-item" :class="{active: item.active}" v-for="(item, index) in typeList" :key="index"
					@click="onTypeListTap(index)">
					{{item.typeTitle}}
				</view>
			</scroll-view>
			<scroll-view class="rMenu" scroll-y="true">
				<block>
					<!-- <view class="rMenu-header">针织面料</view> -->
					<view class="rMenu-list">
						<view class="rMenu-item" v-for="(item, index) in typeListChildren" :key="index"
							@click="onSkipTap('goodsListSelect', index)">
							<image :src="item.icon" mode=""></image>
							<text>{{item.typeTitle}}</text>
						</view>
					</view>
				</block>
				<!-- <block>
					<view class="rMenu-header">针织面料</view>
					<view class="rMenu-list">
						<view class="rMenu-item" v-for="(item, index) in 10">
							<image src="../../static/images/img-goods.jpg" mode=""></image>
							<text>绣花布</text>
						</view>
					</view>
				</block> -->
			</scroll-view>
		</view>
		<p-chooseGoods-submitbar v-if="pageType == 'selectGoods'"></p-chooseGoods-submitbar>
		<view class="btn app_flex-aicjcc" v-if="pageType == 'normal'">
			<g-btn title="网红爆款管理" :customstyle="{height: '70rpx', lineHeight: '70rpx'}"
				@click="onSkipTap('hotStyle')"></g-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageType: 'normal', // normal商品管理   selectGoods选择商品
				pageTitle: '商品管理',
				lMenu: [],
				typeList: [],
				typeListChildren: [],
				keyword: ''
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo')
			this.setPageType(options.pageType)
			this.updatePage()
		},
		methods: {
			async updatePage() {
				try {
					let typeList = await this.getProductTypeList()
					let typeListChildren = await this.getProductTypeChildren(typeList[0].id)
				} catch (e) {
					//TODO handle the exception
				}
			},
			setPageType(pageType) {
				let pageTypeObj = {
					normal: '商品管理',
					selectGoods: '选择商品'
				}
				this.pageType = pageType || 'normal'
				this.pageTitle = pageTypeObj[pageType] || '商品管理'
			},
			onSkipTap(type, index) {
				const urlObj = {
					goodsListSelect: () => {
						if (this.pageType === 'normal') {
							uni.navigateTo({
								url: `/pages/commodityManagement/onSaleAndOffSale?id=${this.typeListChildren[index].id}`
							})
						} else if (this.pageType === 'selectGoods') {
							uni.navigateTo({
								url: `/pages/commodityManagement/goodsListSelect?productTypeId=${this.typeListChildren[index].id}`
							})
						}
					},
					hotStyle: '/pages/commodityManagement/hotStyle'
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onSearchConfirm(e){
				console.log(e);
				uni.navigateTo({
					url: `/pages/commodityManagement/goodsListSelect?keyword=${e}`
				})
			},
			scanCode() {
				this.$g_util.scanCode(-1)
			},
			onTypeListTap(index) {
				this.typeList.forEach((item, idx) => {
					item.active = index == idx
					if (index == idx) {
						this.typeListChildren = []
						this.getProductTypeChildren(item.id)
					}
				})
			},
			getProductTypeList() {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeList().then(({
						data
					}) => {
						if (data?.length > 0) {
							data = data.map((item, index) => {
								item.active = index == 0
								return item
							})
							this.typeList = data
							resolve(data)
						}
					})
				})
			},
			getProductTypeChildren(parentId) {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeChildren({
						parentId
					}).then(({
						data
					}) => {
						if (data?.length > 0) {
							data = this.$g_util.concatRequestUrl(data, 'icon')
							this.typeListChildren = data
							resolve(data)
						}
					})
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.search {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.search-L {
		flex: 1;
		min-width: 300rpx;
	}

	.main {
		display: flex;
	}

	.lMenu {
		width: 200rpx;
		height: calc(100vh - var(--status-bar-height) - 98rpx - 100rpx);
		box-sizing: border-box;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.lMenu-item {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #999;

		&.active {
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			background-color: #fff;

			&::before {
				position: absolute;
				left: 10rpx;
				top: 50%;
				content: '';
				height: 40rpx;
				width: 4rpx;
				border-radius: 2rpx;
				transform: translateY(-50%);
				background-color: $g-main-color;
			}
		}
	}

	.rMenu {
		flex: 1;
		height: calc(100vh - var(--status-bar-height) - 98rpx - 100rpx);
		box-sizing: border-box;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		background-color: #fff;
	}

	.rMenu-header {
		padding: 30rpx 0;
		padding-left: 30rpx;
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}

	.rMenu-list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 32rpx;
	}

	.rMenu-item {
		display: flex;
		flex-direction: column;
		margin-right: 32rpx;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}

		text {
			width: 140rpx;
			line-height: 26rpx;
			margin: 10rpx 0 26rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background-color: #fff;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>